<template>
    <div class="home">

        <el-container class="HomeBox">
            <el-header>
                <img src="hander.png" alt="">
                <el-button @click="tui">退出</el-button>
            </el-header>
            <el-container>
                <el-aside :width="isCollapse ? '63px' : '200px'">
                    <div class="top" @click="isCollapse = !isCollapse">|||</div>
                    <el-menu background-color="#333744" text-color="#fff" :unique-opened="true" router
                        active-text-color="#409EFF" :collapse="isCollapse" :collapse-transition="false"
                        :default-active="active.c">
                        <el-submenu :index="'' + item.id" v-for="(item, index) in rightList" :key="item.id">
                            <template slot="title">
                                <i :class="icons[index]"></i>
                                <span>{{ item.authName }}</span>
                            </template>
                            <el-menu-item :index="it.path" v-for="it in item.children" :key="it.id"
                                @click="mixinAdd(item.authName, it.authName, it.path)">
                                <i class="el-icon-s-grid"></i>
                                <span>{{ it.authName }}</span>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>

                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>


<script>
import { mapMutations } from 'vuex'
import { getMenus } from '@/utils/axios/homeApi'
import store from '@/store/index'
export default {
    data() {
        return {
            rightList: [],
            isCollapse: false,
            icons: ['el-icon-user-solid', 'el-icon-s-ticket', 'el-icon-s-goods', 'el-icon-s-order', 'el-icon-s-platform'],
            active: store.state.Mixins || {}
        }
    },
    methods: {
        ...mapMutations(['addToken', 'addMixins']),
        async getList() {
            let { data: res } = await getMenus()
            this.rightList = res.data
            let route = []
            this.rightList.forEach(item => {
                item.children.forEach(it => {
                    let obj = {
                        path: '/' + it.path,
                        name: it.path.charAt(0).toUpperCase() + it.path.slice(1)
                    }
                    route.push(obj)
                })
            })
            this.$store.commit('routeModule/routeAdd', route)
            let a = this.$router.getRoutes()
            let index = a.findIndex(item => {
                return item.path == '/addgoods'
            })
            if (index != -1) {
                let obj = {
                    path: '/addgoods',
                    name: 'Addgoods',
                    component: () => import('@/components/Addgoods.vue')
                }

                this.$store.commit('routeModule/addRouter', obj)
            }
        },
        tui() {
            this.addToken({})
            this.$router.push('/login')
        },
        mixinAdd(a, b, c) {
            this.addMixins({ a, b, c })
        }
    },
    mounted() {
        this.getList()
    }
}
</script>

<style lang="scss">
.home {
    width: 100%;
    height: 100%;

    .HomeBox {
        width: 100%;
        height: 100%;

        .el-header {
            background: #373d41;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .el-aside {
            background: #333744;
        }

        .el-main {
            background: #eaedf1;
        }
    }
}

.top {
    width: 100%;
    text-align: center;
    color: #eaedf1;
}
</style>